<template>
  <div class="bigpromax">
    <div class="all">
      <div class="top">
        <h1>待办事项</h1>

        <input type="text" placeholder="请输入任务事项" id="todo" v-model="todo" @keydown.enter="todoadd()">
      </div>
      <div class="center">
        <ul>

          <li v-for="(todolist, index) in todolist" :key="index">
            <div><input type="checkbox"  v-model="todolist.status"><span :class="{active:todolist.status}">{{ todolist.time }}{{ todolist.name }}</span></div>
            <div><input type="button" value="删除" @click="remove(index)"></div>  
          </li>

        </ul>
      </div>
      <div class="foot" >
        <span>全部:{{todolist.length}}</span>
        <span>已完成:{{Detodo}}</span>
        <span>未完成:{{Didtodo}}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
const currentime = new Date().toLocaleDateString()

import { ref,computed } from 'vue';
const maxLengh = 20;
const  Detodo = computed(()=>{
  return todolist.value.filter(todolist =>todolist.status).length
})
const Didtodo=computed(()=>{
  return todolist.value.filter(todolist=>!todolist.status).length
})



const todolist = ref(
  [
    {
      time: '6:30',
      name: '请睡觉谢谢',
      status:false
    },
    {
      time: '7:00',
      name: '请再睡会儿觉谢谢',
      status:false
    },
    {
      time: '7:30',
      name: '睡个蛋，上班了',
        status:false
    }
  ]
)
let todo = ref('')
function todoadd(){
  if (todo.value.trim() === '') {
    alert('请输入任务内容！');
    return;
  }
  if (todo.value.length > maxLengh) {
    alert('字数已满20，请重新组织，再修改一下');
   
    return;
  }
  todolist.value.push({
  time:currentime,
  name:todo.value,
  status:false
})

todo.value = ''; 
}



function remove(index){
  if(confirm('你确认要删除它吗')){
    todolist.value.splice(index,1)
  }
}
todo.value = ''; 
</script>
<style>
#todo {
  height: 30px;
  width: 90%;
  border-radius: 10px;
}

* {
  padding: 0;

  margin: 0;
}

.bigpromax {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.all {
  height: 600px;
  width: 800px;
  display: flex;
  margin: auto;

  flex-direction: column;
}

.top,
.foot {
  display: flex;
  height: 100px;
  /* 上下盒子的高度 */
  width: 100%;
  border: 1px solid;
  background-color: aqua;
  justify-content: space-around;
  flex-direction: column;
}

.top {
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.center {
  flex: 3;
  /* 中间盒子的高度是上下盒子的3倍 */
  border: 1px solid;
  background-color: whitesmoke;
  width: 100%;
}

li {
  display: flex;
  list-style: none;
  justify-content: space-between;
  
}

.active{
  text-decoration: line-through;
}

/* 
li input{
  margin-left: auto;
  
} */

</style>